/**
 * 事件绑定
 */

import React, { Component } from 'react'

// 函数组件
const FncEvent = () => {
  // js逻辑
  // 定义事件处理函数
  const handlerClick = (ev) => {

    console.log('点击P2了...', ev.target)

  }

  return (
    <div>
      <h2>我是函数组件</h2>
      <p onClick={(e) => {
        console.log('点击P1了...', e)
      }}>点击事件1</p>
      <p onClick={handlerClick}>点击事件2</p>
    </div>
  )
}


// 类组件
class ComEvent extends Component {
  abc = 100
  // js 逻辑
  // 原型方法
  // 点击事件处理函数
  handlerClick (e) {
    console.log('点击了btn1', e.target, this)
  }

  // 实例方法
  // 组织默认行为的事件处理函数
  // 书写时就确定了this=》上一层的this=》不能被修改
  handlerHref = (e) => {
    e.preventDefault()
    console.log('跳转', e, this, this.abc)
    // 不支持组织默认行为
    // return false
  }

  handlerClick3 = (e) => {
    console.log('绑定的是函数调用', e, this)
  }


  // 模版
  render () {
    console.log(this)
    return (
      <div>
        <h1>我是类组件</h1>
        <button onClick={this.handlerClick.bind(this)}>点击事件1</button>
        <button onClick={this.handlerClick3}>点击事件3</button>
        <button onClick={(e) => {
          console.log('点击btn2', e.target, this)
        }}>点击事件2</button>
        <p>
          <a onClick={this.handlerHref} href="http://itcast.cn">跳转</a>
        </p>
        <hr />
        <FncEvent />
      </div>
    )
  }

}

export default ComEvent